/** * 查询 - doc * */
<template>
  <div id="w-table-filter" class="w-table-filter">
    <div class="w-table-filter-l">
      <el-form
        ref="form"
        class="w-table-filter-form"
        :inline="true"
        label-position="right"
        :show-message="false"
      >
        <el-form-item label="厂家名称">
          <el-select
            v-model="filterData.firmId"
            class="w-table-filter-input"
            placeholder="请选择"
            @change="dicProject"
          >
            <el-option
              v-for="(opt, idx) in dic.firm"
              :key="idx"
              :label="opt.name"
              :value="opt.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
          <el-select
            v-model="filterData.enterpriseId"
            class="w-table-filter-input"
            placeholder="请选择"
            @change="dicProject"
          >
            <el-option
              v-for="(opt, idx) in dic.enterprise"
              :key="idx"
              :label="opt.name"
              :value="opt.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="建设类型">
          <el-select
            v-model="filterData.constructionType"
            class="w-table-filter-input"
            placeholder="请选择"
            @change="dicProject"
          >
            <el-option
              v-for="(opt, idx) in dic.constructionType"
              :key="idx"
              :label="opt.name"
              :value="opt.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="结构类型">
          <el-select
            v-model="filterData.structureType"
            class="w-table-filter-input"
            placeholder="请选择"
            @change="dicProject"
          >
            <el-option
              v-for="(opt, idx) in dic.structureType"
              :key="idx"
              :label="opt.name"
              :value="opt.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="项目名称">
          <el-input
            v-model.trim="filterData.projectName"
            class="w-table-filter-input"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="success"
            @click.native="save"
          >搜索</el-button>

          <el-button
            icon="el-icon-refresh"
            type="info"
            @click.native="clear"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="w-table-filter-r">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click.native="$emit('add')"
      >添加</el-button>
    </div>
  </div>
</template>
<script>
import $dic from '@/api/dic.js'
export default {

  // 组件
  components: {},
  filters: {},
  data() {
    return {
      def: {},
      filterData: {

        //	厂家id
        firmId: '',

        //	企业id
        enterpriseId: '',

        //	结构类型
        structureType: '',

        //	建设类型
        constructionType: '',

        //	项目名称
        projectName: '',

        //	网关名称
        devName: '',

        // 项目结点ID
        nodeId: '',
      },

      // 请使用与 src\api\dic.js 中函数相同的名称,方便initDic() 中会循环填充
      dic: {
        enterprise: [],
        firm: [],
        dicBrand: [],
        structureType: [],
        constructionType: [],
      },
    }
  },
  created() {
    this.def = this.$tool.extend(this.filterData)
  },
  mounted() {
    this.initDic()
  },
  methods: {
    save() {
      const d = { ...this.filterData }
      this.$emit('change', d)
    },
    clear() {
      this.filterData = this.$tool.extend(this.def)
      this.$emit('change', this.filterData)
    },

    // 加载字典
    initDic() {
      let key = Object.keys(this.dic)
      key.forEach((item) => {
        $dic[item]()
          .then((res) => {
            res.data.unshift({
              id: '',
              name: '全部',
            })
            this.dic[item] = []
            this.dic[item] = res.data
          })
          .catch((error) => {
            console.log('catch', error)
          })
      })
    },
    updateDic(key, sendData) {
      return $dic[key](sendData).then((res) => {
        res.data.unshift({
          id: '',
          name: '全部',
        })

        this.dic[key] = []
        this.dic[key] = res.data
      })
    },
    dicProject() {
      this.filterData.projectId = ''
      this.filterData.nodeId = ''
      let sendData = {
        firmId: this.filterData.firmId,
        enterpriseId: this.filterData.enterpriseId,
      }
      this.updateDic('project', sendData)
    },
  },
}
</script>

<!-- 这里用来写私有的css -->
<style lang="scss" scoped></style>
